<template>
  <div class="review-edit-view w80">
    <h2>编辑评论</h2>
    <form @submit.prevent="saveReview">
      <div class="form-group">
        <label for="feedback">评论内容:</label>
        <textarea id="feedback" v-model="review.feedback" rows="5"></textarea>
      </div>
      <div class="form-group">
        <label for="rating">评分:</label>
        <input type="number" id="rating" v-model.number="review.rating" min="1" max="5" />
      </div>
      <div class="form-actions">
        <button type="submit" class="submit-btn">保存</button>
        <button type="button" class="cancel-btn" @click="goBack">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
import ReviewApi from '@/api/review'

export default {
  name: 'ReviewEditView',
  data() {
    return {
      review: {
        id: null,
        feedback: '',
        rating: 0,
      },
    }
  },
  methods: {
    async fetchReview() {
      const reviewId = this.$route.params.id
      if (reviewId) {
        try {
          const api = new ReviewApi()
          // 假设有一个获取单个评论的API接口，目前ReviewApi中没有，可能需要新增
          // 这里暂时模拟数据或者调用getReviewList过滤获取
          // 如果有getReviewById，应该调用它
          // const res = await api.getReviewById(reviewId);
          // this.review = res.data;

          // 临时方案：从reviewList中查找（如果reviewListView有缓存数据传递过来）
          // 或者在后端新增一个getReviewById的接口

          // 目前没有后端获取单个评论的接口，先填充假数据或者从sessionStorage获取
          const allReviewsRes = await api.getReviewList(100, 0); // 获取所有评论来查找
          if (allReviewsRes.code === 200) {
            const foundReview = allReviewsRes.data.list.find(r => String(r.id) === String(reviewId));
            if (foundReview) {
              this.review = { ...foundReview };
            } else {
              this.$myMessageBox('评论不存在或无法获取');
              this.goBack();
            }
          }

        } catch (error) {
          console.error('获取评论详情失败:', error)
          this.$myMessageBox('获取评论详情失败')
          this.goBack()
        }
      }
    },
    async saveReview() {
      try {
        const api = new ReviewApi()
        const res = await api.editReview(this.review.id, { feedback: this.review.feedback, rating: this.review.rating })
        if (res.code === 200) {
          this.$myMessageBox('评论保存成功')
          this.goBack()
        } else {
          this.$myMessageBox(res.msg || '评论保存失败')
        }
      } catch (error) {
        console.error('保存评论失败:', error)
        this.$myMessageBox('保存评论失败')
      }
    },
    goBack() {
      this.$router.go(-1)
    },
  },
  mounted() {
    this.fetchReview()
  },
}
</script>

<style scoped>
.review-edit-view {
  padding: 20px;
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
  width: calc(100% - 22px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.submit-btn,
.cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.submit-btn {
  background-color: #007bff;
  color: white;
}

.submit-btn:hover {
  background-color: #0056b3;
}

.cancel-btn {
  background-color: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background-color: #5a6268;
}
</style> 